const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 处理绝对路径
function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  // 开发环境
  // mode: 'development',
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    path: resolve('dist'), // dist的绝对路径
    filename: 'static/js/[name].bundle.js',
    publicPath: '/' // 引入打包的文件时路径以/开头
  },
  // 模块加载器
  module: {
    rules: [ // 配置loader
      // 处理ES6 ==> ES5
      {
        test: /\.js$/, // 处理js文件
        // exclude: /(node_modules|bower_components)/, 
        include: [resolve('src')], // 只对匹配文件夹进行处理 ==> 加快打包
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], // 配置预设包(包含了多个es语法解析的plugin包)
            plugins: [ // 配置预设包之外的插件包
              [
                "component", 
                {
                  "libraryName": "mint-ui", // 针对mint-ui来实现按需引入打包
                  "style": true // 自动打包组件对应的样式
                }
              ]
            ]
          }
        }
      },
      // 处理css文件
      {
        test: /\.css$/, // 处理css文件
        // css-loader: 将css打包到js中
        // style-loader: 将js中的css塞入style标签中
        use: ['vue-style-loader', 'css-loader'], // 多个loader从右到左处理
      },
      // 处理图片
      {
        test: /\.png|gif|jpg|svg$/,
        loader: 'url-loader', // 内部需要file-loader, file-loader不会处理base64
        options: {
          limit: 8192,
          name: 'static/img/[name].[hash:7].[ext]' // 相对于output.path
        }
      },
      // vue-loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  // 插件
  plugins: [ // 插件实例对象
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new CleanWebpackPlugin(), // 清除打包文件夹
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ],

  // 开发服务器
  devServer: {
    port: "8888",
    open: true, // 自动打开浏览器
    quiet: true, // 控制台不报过多的日志
    proxy: {
      '/api': {
        target: 'http://localhost:4000', // 目标地址
        pathRewrite: {'^/api' : ''},
        changeOrigin: true
      }
    },
    historyApiFallback: true // 任何404响应都会被替代为index
  },

  resolve: {
    alias: {
      '@': resolve('src'),
      // '@comps': resolve('src/components')
    },
    extensions: ['.js', '.vue'], // 可省略后缀的文件
  },

  devtool: 'cheap-module-eval-source-map'
}